<template>
    <div class="content"
         v-infinite-scroll="loadMore"
         infinite-scroll-disabled="loading"
         infinite-scroll-distance="10">
        <div class="mainContent">
            <div class="topP">
                <div class="label_item">
                    <div class="shuxian"></div>
                    <div class="label_content">待我审核</div>
                </div>
                <div class="top_itemps">
                    <div class="select_time">
                        <div class="time_img"></div>
                        <div class="time_font">时间:</div>
                        <el-date-picker
                                style="width:174px"
                                v-model="searchTime"
                                size="small"
                                type="date"
                                placeholder="选择日期">
                        </el-date-picker>
                    </div>
                    <div class="select_JobNum">
                        <div class="persion_img"></div>
                        <div class="persion_font">工号/姓名:</div>
                        <el-input v-model="searchNameOrNum" size="small" style="width:120px"></el-input>
                    </div>
                    <div class="searchButton" @click="searchList">
                        <div class="searchButtonFont">查询</div>
                    </div>

                    <div class="batchGroup">
                        <div class="buttonAgree">
                            <div class="buttonAgreeFont" @click="agree">批量通过</div>
                        </div>
                        <div class="buttonReject">
                            <div class="buttonRejectFont" @click="reject">批量驳回</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ListP">
                <el-table
                        ref="multipleTable"
                        :data="tableData3"
                        tooltip-effect="dark"
                        style="width: 1200px"
                        header-cell-style="background:rgba(242,242,242,1)"
                        row-style="text-align: center"
                        @selection-change="handleSelectionChange">

                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            label="审核状态"
                            width="120">
                        <template slot-scope="scope">{{ scope.row.auditorStatusDetail }}</template>
                    </el-table-column>
                    <el-table-column
                            prop="garden"
                            label="通行园区"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="area"
                            label="通行区域"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="proposer"
                            label="申请人"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="applyReason"
                            label="通行事由"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="通行时间"
                            show-overflow-tooltip>
                        <template slot-scope="scope">{{ scope.row.dateDay }}</template>
                    </el-table-column>
                    <el-table-column
                            prop="goCount"
                            label="通行次数"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="申请时间"
                            show-overflow-tooltip>
                        <template slot-scope="scope">{{ scope.row.createTime }}</template>
                    </el-table-column>
                </el-table>
                <div class="fenye">
                    <el-pagination
                            background
                            @current-change="handleCurrentChange"
                            :current-page="query.pageNo"
                            layout="prev, pager, next,total"
                            page-size="5"
                            :total="TheTotal">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            this.searchList();
        },
        data() {
            return {
                tableData3: [],
                multipleSelection: [],
                TheTotal:0,
                currentPage:1,
                searchNameOrNum: '',
                searchTime: '',
                loading: false,
                list: [1],
                query: {
                    pageNo: 1,
                    hasTotal: true
                }
            }
        },

        methods: {
            agree() {
                let _this =this;
                this.$api.agree({ids:this.multipleSelection, auditor: sessionStorage.getItem("ids")}).then((res) => {
                    console.log(res);
                    _this.searchList();
                }).catch((err) => {
                    console.log(err)
                })
            },
            reject() {
                let _this =this;
                this.$api.reject({ids:this.multipleSelection, auditor: sessionStorage.getItem("ids")}).then((res) => {
                    console.log(res);
                    _this.searchList();
                }).catch((err) => {
                    console.log(err)
                })
            },
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            searchList() {
                let auditorId = sessionStorage.getItem('ids');
                let _this = this;
                this.loading = true;
                var pattern = new RegExp("[\u4E00-\u9FA5]+");
                // let jobNum = this.searchNameOrNum || '';
                let dates = this.searchTime == '' ? '' : this.$moment(this.searchTime).format('YYYY-MM-DD');
                let usedata
                // let usedata = {
                //     auditor: auditorId,
                //     jobNumber: jobNum,
                //     dateDay: dates,
                //     pageNo: "",
                //     pageSize: "5"
                // }
                if(this.searchNameOrNum!==''){
                    if(pattern.test(this.searchNameOrNum)){
                        usedata = {auditor: auditorId,name:this.searchNameOrNum,dateDay:dates,pageNo:this.query.pageNo,pageSize: "5"}
                    }else{
                        usedata = {auditor: auditorId,jobNumber:this.searchNameOrNum,dateDay:dates,pageNo: this.query.pageNo,pageSize: "5"}
                    };
                }else{
                    usedata = {auditor: auditorId,jobNumber:'',dateDay:dates,pageNo: this.query.pageNo,pageSize: "5"}
                }


                this.$api.goApplyPage(usedata).then((res => {
                    _this.TheTotal=res.total;
                    res.records.forEach(item => {
                        item.createTime = _this.timestampToTime(item.createTime);
                    });
                    this.tableData3 = res.records;
                    if (this.pageNo < res.pages) {
                        this.loading = false
                    }
                }))
            },
            loadMore() {
                this.loading = true;
                setTimeout(() => {
                    let last = this.list[this.list.length - 1];
                    for (let i = 1; i <= 10; i++) {
                        this.list.push(last + i);
                    }
                    this.loading = false;
                }, 2500);
            },
            timestampToTime(time) {
                var date = new Date(time * 1) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
                var Y = date.getFullYear() + '-'
                var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
                var D = date.getDate() + ' '
                var h = date.getHours() + ':'
                var m = date.getMinutes() + ':'
                var s = date.getSeconds()
                return Y + M + D
            },
            handleCurrentChange(val){
                this.query.pageNo=val;
                this.searchList();
            },
            handleSelectionChange(val) {
                this.multipleSelection=[];
                val.forEach(row => {
                    this.multipleSelection.push(row.id);
                });
            }
        }
    }
</script>

<style scoped>
    .content {
        background: #f2f4f5;
        height: 718px;
        width: 1366px;
        padding-top: 40px;
        padding-left: 83px;
    }

    .mainContent {
        width: 1200px;
        height: 623px;
        background: white;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding-bottom: 117px;
    }

    .topP {
        height: 178px;
        width: 1200px;
        padding-top: 33px;
    }

    .label_item {
        width: 95px;
        height: 20px;
        margin-left: 33px;
        display: flex;
        flex-wrap: wrap;
    }

    .shuxian {
        width: 4px;
        height: 20px;
        background: rgba(65, 64, 64, 1);
        border-radius: 4px;
        margin-top: 8px;
    }

    .label_content {
        margin-left: 7px;
        width: 80px;
        height: 20px;
        font-size: 20px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        line-height: 34px;
        color: rgba(65, 64, 64, 1);
    }

    .top_itemps {
        margin-top: 50px;
        width: 1200px;
        height: 30px;
        display: flex;

    }

    .select_time {
        width: 265px;
        height: 30px;
        display: flex;
    }

    .time_img {
        background: url("../assets/img/time_img.png") no-repeat center;
        background-size: 100% auto;
        margin-left: 57px;
        width: 16px;
    }

    .time_font {
        margin-right: 7px;
        margin-top: 3px;
        margin-left: 8px;
        width: 42px;
        height: 14px;
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        line-height: 24px;
        color: rgba(50, 50, 50, 1);
        opacity: 1;
    }

    .select_JobNum {
        width: 305px;
        height: 30px;
        display: flex;
    }

    .persion_img {
        background: url("../assets/img/persion_img.png") no-repeat center;
        background-size: 100% auto;
        margin-left: 66px;
        width: 14px;
    }

    .persion_font {
        margin-right: 7px;
        margin-top: 3px;
        margin-left: 8px;
        width: 85px;
        height: 14px;
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        line-height: 24px;
        color: rgba(50, 50, 50, 1);
        opacity: 1;
    }

    .searchButton {
        margin-top: 2px;
        margin-left: 20px;
        width: 82px;
        height: 27px;
        background: rgba(25, 94, 215, 1);
        opacity: 1;
        border-radius: 4px;
        padding-bottom: 7px;
        text-align: center;
    }

    .searchButtonFont {
        margin-left: 23px;
        width: 37px;
        height: 14px;
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        line-height: 24px;
        color: rgba(255, 255, 255, 1);
        opacity: 1;
    }

    .batchGroup {
        margin-left: 245px;
        width: 215px;
        height: 28px;
        display: flex;
    }

    .buttonAgree {
        width: 102px;
        height: 27px;
        background: rgba(25, 94, 215, 1);
        opacity: 1;
        border-radius: 4px;
        padding-bottom: 7px;
    }

    .buttonAgreeFont {
        margin-left: 23px;
        width: 56px;
        height: 14px;
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        line-height: 24px;
        color: rgba(255, 255, 255, 1);
        opacity: 1;
    }

    .buttonReject {
        margin-left: 9px;
        width: 102px;
        height: 27px;
        background: rgba(201, 1, 1, 1);
        opacity: 1;
        border-radius: 4px;
        padding-bottom: 7px;
    }

    .buttonRejectFont {
        width: 70px;
        height: 14px;
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        line-height: 24px;
        color: rgba(255, 255, 255, 1);
        opacity: 1;
        margin-left: 16px;
        text-align: center;
    }

    .fenye{
        display: flex;
        justify-content: center;
        margin-top: 20px;
    }

</style>